<template>
  <div class="task-create-container">
    <el-card class="box-card">
        <el-form 
            ref="formRef" 
            :rules="rules"
            :model="form">
            <el-row>
              <el-col :span="8">
                <el-form-item label="年级" prop="gradeLevel" >
                  <el-select v-model="form.gradeLevel" placeholder="请选择年级"  @change="changeLevel" style="width:100%">
                    <el-option v-for="item in options" :key="item.label" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="标题"  prop="title">
                  <el-input v-model="form.title"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="试卷"  required>
                  <el-table  :data="form.paperItems" border fit highlight-current-row style="width: 100%">
                    <el-table-column prop="subjectId" label="学科"  width="120px" />
                    <el-table-column prop="name" label="名称"  />
                    <el-table-column prop="createTime" label="创建时间" width="160px"/>
                    <el-table-column  label="操作" align="center"  width="160px">
                      <template slot-scope="{row}">
                        <el-button size="mini" type="danger" @click="removePaper(row)" class="link-left">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                 <el-form-item>
                   <div class="btns">
                      <template v-if="form.id == null">
                        <el-button class="btn" type="success" @click="submitForm">提交</el-button>
                      </template>
                      <template v-else>
                        <el-button class="btn" type="success" @click="updateForm">更新</el-button>
                      </template>
                      <el-button class="btn" type="primary" @click="addPaper">添加试卷</el-button>
                      <el-button class="btn" type="danger" @click="resetForm">重置</el-button>
                   </div>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
    </el-card>
    <el-dialog title="任务信息" :visible.sync="paperPage.showDialog" :modal-append-to-body="false" width="70%">
      <el-form style="margin-bottom:20px;width:100%;" class="queryForm" :model="paperPage.queryParam" ref="queryForm">
        <el-form-item label="学科" style="margin-right:15px">
          <el-select v-model="paperPage.queryParam.subjectId"  clearable @clear="examPaperSubmitForm" style="width:300px">
            <el-option v-for="item in subjectList" :key="item.id" :value="item.id" :label="item.name+' ( '+item.levelName+' )'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="examPaperSubmitForm">查询</el-button>
        </el-form-item>
      </el-form>
       <el-table :data="paperPage.tableData"
                @selection-change="handleSelectionChange" border fit highlight-current-row style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="id" label="Id" width="90px"/>
        <el-table-column prop="subjectName" label="学科" width="120px" />
        <el-table-column prop="name" label="名称"  />
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
            style="margin-top:20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="pagination"
            :current-page="paperPage.queryParam.pageIndex"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="paperPage.queryParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paperPage.total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
         <el-button class="saveBtn" type="primary" @click="confirmPaperSelect">保存</el-button>
     </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //任务表单
      form: {
        id: null,
        gradeLevel: null,
        title: '',
        paperItems: []
      },
      //学科列表
      subjectList:[],
      //弹出框列表
      paperPage: {
        subjectFilter: null,
        multipleSelection: [],
        showDialog: false,
        queryParam: {
          subjectId: null,
          level: null,
          paperType: 3,
          pageIndex: 1,
          pageSize: 5
        },
        listLoading: true,
        tableData: [],
        total: 0
      },
      //表单校验规则
      rules: {
        gradeLevel: [{ required: true, message: '请输入年级', trigger: 'change' }],
        title: [{ required: true, message: '请输入任务标题', trigger: 'blur' }]
      },
      //年级选择
      options: [{
        value: '1',
        label: '一年级'
      }, {
        value: '2',
        label: '二年级'
      }, {
        value: '3',
        label: '三年级'
      }, {
        value: '4',
        label: '四年级'
      }, {
        value: '5',
        label: '五年级'
      }, {
        value: '6',
        label: '六年级'
      }, {
        value: '7',
        label: '初一'
      }, {
        value: '8',
        label: '初二'
      }, {
        value: '9',
        label: '初三'
      }, {
        value: '10',
        label: '高一'
      }, {
        value: '11',
        label: '高二'
      }, {
        value: '12',
        label: '高三'
      }],
    }
  },
  created(){
    if( this.taskId != null && this.taskId != ''){
      this.getTaskById(this.taskId);
    }
  },
  computed:{
    taskId(){
      return this.$store.state.taskId;
    }
  },
  methods:{
    //根据id查询任务
    getTaskById(id){
      this.getRequest("/api/admin/task/select/"+id).then(resp => {
        if(resp && resp.code == 200){
          resp.obj.gradeLevel = resp.obj.gradeLevel + '';
          this.form = resp.obj;
        }
      })
    },
    //移除任务试卷
    removePaper(row){
      this.form.paperItems.forEach((item, index, arr) => {
        if (item.id === row.id) {
          arr.splice(index, 1)
        }
      })
    },
    //试卷提交
    submitForm(){
      if(this.form.paperItems.length == 0){
        this.$message.error("试卷不能为空");
        return false;
      }
      this.$refs.formRef.validate( valid => {
        if(!valid){
          this.$message.error("请输入所有的必填项！！");
          return false;
        }else{
          this.postRequest("/api/admin/task/edit",this.form).then(resp=>{
            if(resp && resp.code == 200){
              this.$router.replace("/admin/task/list");
            }
          })
        }
      })
    },
    //更新操作
    updateForm(){
      if(this.form.paperItems.length == 0){
        this.$message.error("试卷不能为空");
        return false;
      }
      this.$refs.formRef.validate( valid => {
        if(!valid){
          this.$message.error("请输入所有的必填项！");
          return false;
        }else{
          this.putRequest("/api/admin/task/edit",this.form).then(resp=>{
            if(resp && resp.code == 200){
              this.$store.commit("initTaskId","");
              this.$router.replace("/admin/task/list");
            }
          })
        }
      })
    },
    //添加试卷
    addPaper(){
      if( this.form.gradeLevel === null){
        this.$message.error("请先选择年级！！");
        return false;
      }
      this.paperPage.queryParam.level = this.form.gradeLevel;
      this.paperPage.showDialog = true
      this.search();
    },
    search(){
      this.paperPage.showDialog = true
      this.listLoading = true
      this.getRequest("/api/admin/exam/paper/taskExamPage",{
        subjectId: this.paperPage.queryParam.subjectId,
        level: this.paperPage.queryParam.level,
        paperType: this.paperPage.queryParam.paperType,
        pageIndex: this.paperPage.queryParam.pageIndex,
        pageSize : this.paperPage.queryParam.pageSize
      }).then(re => {
        if(re){
          this.paperPage.tableData = re.data
          this.paperPage.total = re.total   
        }
        
      })
    },
    //查询任务试卷列表
    examPaperSubmitForm(){
      this.search();
    },
    //选择任务试卷
    confirmPaperSelect(){
      this.paperPage.multipleSelection.forEach(ep => this.form.paperItems.push(ep));
      this.paperPage.showDialog = false;
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
        //console.log(newSize);
        this.paperPage.queryParam.pageSize = newSize;
        this.search();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
        //console.log(newPage);
        this.paperPage.queryParam.pageIndex = newPage
        this.search();
    },
    changeLevel(value){
      this.getRequest("/api/admin/subject/listBylevel",{
        level: value
      }).then( resp => {
        if(resp && resp.code == 200){
          this.subjectList = resp.obj;
        }
      })
    },
    handleSelectionChange (val) {
      this.paperPage.multipleSelection = val
    },
    //重置表单
    resetForm(){
      let lastId = this.form.id
      this.$refs.formRef.resetFields()
      this.form = {
        id: null,
        gradeLevel: null,
        title: '',
        paperItems: []
      }
      this.form.id = lastId
    }
  }
}
</script>

<style lang="scss" scoped>
.task-create-container{
  font-family: "华文楷体";
  .box-card{
    border-radius: 10px;
    color:#1A1A1A;
    .btns{
      display: flex;
      justify-content: flex-end;
      margin: 20px 0 10px 0 ;
      .btn{
        padding-left:  35px;
        padding-right:  35px;
        font-size: 14px;
        font-family: "华文楷体";
      }
    }
  }
  .queryForm{
    display: flex;
    /deep/.el-form-item {
      display: flex;
      flex-direction: row;
    }
  }
  .el-pagination{
    display: flex;
    justify-content: flex-end;
  }
  .saveBtn{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #66BB6A;
      margin-bottom: 20px;
      font-family: "华文楷体";
  }
}
</style>